<template>
  <el-form ref="genInfoForm" :model="form" :rules="rules" label-width="150px" class="my-form">
     <div class="group-item">
        <el-form-item prop="tplCategory">
          <template #label>
            <span>生成模板</span>
          </template>
          <el-select v-model="form.tplCategory">
            <el-option label="单表（增删改查）" value="crud" />
            <el-option label="树表（增删改查）" value="tree" />
            <el-option label="主子表（增删改查）" value="sub" />
          </el-select>
        </el-form-item>
        <el-form-item prop="packageName">
          <template #label>
            <span>
              生成包路径
              <el-tooltip content="生成在哪个java包下，例如 com.yun.system" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="form.packageName" />
        </el-form-item>
        <el-form-item prop="moduleName">
          <template #label>
            <span>
              生成模块名
              <el-tooltip content="可理解为子系统名，例如 system" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="form.moduleName" />
        </el-form-item>
        <el-form-item prop="businessName">
          <template #label>
            <span>
              生成业务名
              <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="form.businessName" />
        </el-form-item>
        <el-form-item prop="functionName">
          <template #label>
            <span>
              生成功能名
              <el-tooltip content="用作类描述，例如 用户" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="form.functionName" />
        </el-form-item>
        <el-form-item>
          <template #label>
            <span>
              上级菜单
              <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-cascader
            v-model="form.selectParent"
            :options="menus"
            :props="{
              value: 'menuId',
              label: 'menuName',
              expandTrigger: 'hover',
              children: 'children',
              checkStrictly: true,
            }"
            clearable
            style="width: 100%"
          />
        </el-form-item>
    </div>
    <el-form-item prop="genType">
      <template #label>
        <span>
          生成代码方式
          <el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </span>
      </template>
      <el-radio v-model="form.genType" label="0">zip压缩包</el-radio>
      <el-radio v-model="form.genType" label="1">自定义路径</el-radio>
    </el-form-item>
    <template v-if="form.genType === '1'">
      <el-form-item prop="genPath">
        <template #label>
          <span>
            自定义路径
            <el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
        </template>
        <el-input v-model="form.genPath">
          <template #append>
            <el-dropdown>
              <el-button type="primary">
                最近路径快速选择
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-on:click="form.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-input>
      </el-form-item>
    </template>
    <div v-show="form.tplCategory === 'tree'" class="group-item">
      <h4 class="form-header" style="width:100%">其他信息</h4>
      <el-form-item>
        <template #label>
          <span>
            树编码字段
            <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
        </template>
        <el-select v-model="form.treeCode" placeholder="请选择">
          <el-option
            v-for="column in form.columns"
            :key="column.columnName"
            :label="column.columnName + '：' + column.columnComment"
            :value="column.columnName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <template #label>
          <span>
            树父编码字段
            <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
        </template>
        <el-select v-model="form.treeParentCode" placeholder="请选择">
          <el-option
            v-for="column in form.columns"
            :key="column.columnName"
            :label="column.columnName + '：' + column.columnComment"
            :value="column.columnName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <template #label>
          <span>
            树名称字段
            <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
        </template>
        <el-select v-model="form.treeName" placeholder="请选择">
          <el-option
            v-for="column in form.columns"
            :key="column.columnName"
            :label="column.columnName + '：' + column.columnComment"
            :value="column.columnName"
          />
        </el-select>
      </el-form-item>
    </div>
    <div v-show="form.tplCategory === 'sub'" class="group-item">
      <h4 class="form-header" style="width:100%">关联信息</h4>
      <el-form-item>
        <template #label>
          <span>
            关联子表的表名
            <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
        </template>
        <el-select v-model="form.subTableName" placeholder="请选择" @change="subSelectChange">
          <el-option
            v-for="(table, index) in tables"
            :key="index"
            :label="table.tableName + '：' + table.tableComment"
            :value="table.tableName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <template #label>
          <span>
            子表关联的外键名
            <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
        </template>
        <el-select v-model="form.subTableFkName" placeholder="请选择">
          <el-option
            v-for="(column, index) in subColumns"
            :key="index"
            :label="column.columnName + '：' + column.columnComment"
            :value="column.columnName"
          ></el-option>
        </el-select>
      </el-form-item>
    </div>
  </el-form>
</template>

<script lang="ts">
import { handleTree, getTreeData, getFathersById } from '@/utils'
import { useStore } from 'vuex'
import { reactive, toRefs, computed, watch, watchEffect } from 'vue'
import { StateType as GenCodeStateType, GenTableColumn, GenTable } from '@/store/modules/system/genCode'
import { Menu } from '@/store/modules/system/menu'

interface DataType {
  menus: Array<Menu>;
  subColumns: Array<GenTableColumn>;
  form: GenTable;
  rules: object;
}
export default {
  name: 'GenInfoForm',
  setup() {
    const store = useStore<{genCode: GenCodeStateType}>()
    const data = reactive<DataType>({
      menus: [],
      subColumns: [],
      form: {
        tableId: null,
        tplCategory: '',
        packageName: '',
        moduleName: '',
        businessName: '',
        functionName: '',
        selectParent: null,
        genType: '',
        genPath: '',
        treeCode: '',
        treeParentCode: '',
        treeName: '',
        subTableName: '',
        subTableFkName: ''
      },
      rules: {
        tplCategory: [
          { required: true, message: '请选择生成模板', trigger: 'blur' }
        ],
        packageName: [
          { required: true, message: '请输入生成包路径', trigger: 'blur' }
        ],
        moduleName: [
          { required: true, message: '请输入生成模块名', trigger: 'blur' }
        ],
        businessName: [
          { required: true, message: '请输入生成业务名', trigger: 'blur' }
        ],
        functionName: [
          { required: true, message: '请输入生成功能名', trigger: 'blur' }
        ]
      }
    })
    /** 选择子表名触发 */
    const subSelectChange = () => {
      data.form.subTableFkName = ''
    }
    const tables = computed(() => {
      return store.state.genCode.tables
    })
    const info = computed(() => {
      return store.state.genCode.info
    })
    const selectParent = computed(() => {
      return data.form.selectParent
    })
    const getTreeSelect = async() => {
      const res = await store.dispatch('menu/getMenuList')
      const list = handleTree(res.data, 'menuId')
      data.menus = getTreeData(list) as Array<Menu>
      if (data.form.parentMenuId) {
        data.form.selectParent = getFathersById(Number(data.form.parentMenuId), data.menus, 'menuId')
      }
    }
    watch(info, () => {
      getTreeSelect()
      data.form = info.value
    })
    watch(selectParent, (val) => {
      if (val && val.length) {
        data.form.parentMenuId = val[val.length - 1]
      } else {
        data.form.parentMenuId = null
      }
    })
    /** 设置关联外键 */
    const setSubTableColumns = (value: string) => {
      for (const item in tables.value) {
        const name = tables.value[item].tableName
        if (value === name) {
          data.subColumns = tables.value[item].columns || []
          break
        }
      }
    }
    watchEffect(() => {
      setSubTableColumns(data.form.subTableName || '')
    })
    return {
      subSelectChange,
      tables,
      ...toRefs(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.my-form{
  max-width: 800px;
  .group-item{
    display: flex;
    flex-wrap: wrap;
    .el-form-item{
      width: 400px;
      .el-select{
        width: 100%;
      }
    }
  }
}
</style>
